<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set var="root" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>闲情偶寄</title>
<jsp:include page="../common/head.jsp" flush="true" />
<script type="text/javascript">
	$(function() {
		var colors = [ "#ff8f59", "#ffdc35", "#b7ff4a", "#7373b9", "#5c5cad" ];
	})
</script>
</head>

<body>
	<jsp:include page="../common/left.jsp" flush="true" />
	<div class="right">
		<jsp:include page="../common/header.jsp" flush="true" />
		<header class="content-header">
			<div class="content-header-container">
				<h1>闲情偶寄</h1>
				<h5>悠闲的生活，随便记点什么</h5>
			</div>
		</header>
		<div class="main">
			<c:if test="${fn:length(articleInformations)<=0}">
				<center>
					<h2>木有</h2>
				</center>
			</c:if>
			<ul class="article-list">
				<c:forEach items="${articleInformations }" var="articleInformation">
					<li class="article">
						<div class="article-time">
							<span class="time">${articleInformation.time }</span>&nbsp;
							<a href="${root }/category?categoryId=${articleInformation.category.id }" class="title">${articleInformation.category.name }</a>
						</div> <a href="${root }/article/read/${articleInformation.article.id }" class="article-name">${articleInformation.article.title }</a>
						<div class="article-content">${articleInformation.article.summary}</div>
						<div class="tags">
							<ul>
								<c:forEach var="tag" items="${articleInformation.tags }">
									<li><a class="tag" href="${root }/tag?tagId=${tag.id}">${tag.name}</a></li>
								</c:forEach>
								<c:if test="${!empty username}">
									<li style="float: right; padding-top: 0px; padding-bottom: 0px;"><a class="tag"
											href="/" style="background-color: orangered; margin-right: 0px;">删除</a></li>
									<li style="float: right; padding-top: 0px; padding-bottom: 0px;"><a class="tag"
											href="${root}/manager/article/${articleInformation.article.id}"
											style="background-color: cornflowerblue; margin-right: 0px;">修改</a></li>
								</c:if>
							</ul>
						</div>
					</li>
				</c:forEach>
			</ul>
			<div class="pages">
				<center>
					<nav aria-label="Page navigation">
						<ul class="pagination">
							<li><a href="${root}/?pageNum=1&&pageSize=2" aria-label="Previous">
									<span aria-hidden="true">&laquo;</span>
								</a></li>
							<c:forEach begin="1" end="${pageInfo.pages }" var="ps">
								<c:if test="${pageInfo.pageNum == ps }">
									<li class="disabled"><a>${ps }</a></li>
								</c:if>
								<c:if test="${pageInfo.pageNum != ps }">
									<li><a href="${root}/?pageNum=${ps}&&pageSize=2">${ps }</a></li>
								</c:if>
							</c:forEach>
							<li><a href="${root}/?pageNum=${pageInfo.pages}&&pageSize=2" aria-label="Next">
									<span aria-hidden="true">&raquo;</span>
								</a></li>
						</ul>
					</nav>
				</center>
			</div>
		</div>

		<jsp:include page="../common/footer.jsp" flush="true" />

	</div>
	<a id="gotop" href="javascript:pageScroll()">
		<span class="glyphicon glyphicon-chevron-up"></span>
	</a>
</body>

</html>